<template>
	<div class="input" :style="widthStyle">
		<div class="prepend">
			<slot name="prepend"></slot>
		</div>
		<!-- <textarea
			v-if="type === 'textarea'"
			v-model="modelValue"
			:disabled="disabled"
			:readonly="readonly"
			:placeholder="placeholder"
			:maxlength="maxlength || '-1'"
			class="textarea-components"
			:style="[
				{
					height: textareaHeight,
				},
			]"
		></textarea> -->
		<u-input v-if="type === 'textarea'" v-model="modelValue" type="textarea" border :clearable="false" :disabled="disabled" :maxlength="maxlength || '-1'"></u-input>
		<div v-else class="input" :style="widthStyle">
			<input v-model="modelValue" :type="type" :disabled="disabled" :readonly="readonly" :placeholder="placeholder" :maxlength="maxlength" class="input-components" />
			<uni-icons v-if="clearable && !readonly" class="close" :type="modelValue ? 'close' : ''" color="#c4c4cf" size="18" @click="close"></uni-icons>
		</div>

		<div class="append">
			<slot name="append"></slot>
		</div>

		<div class="limit" v-if="maxlength && showLimit">{{ modelValue.length }} / {{ maxlength }}</div>
	</div>
</template>

<script>
export default {
	name: "vInput",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: String,
			default: "",
		},
		type: {
			type: String,
			default: "text",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		placeholder: {
			type: String,
			default: "",
		},
		maxlength: {
			type: [Number, String],
			default: null,
		},
		showLimit: {
			type: Boolean,
			default: false,
		},
		rows: {
			type: [Number, String, Object],
			default: 3,
		},
		clearable: {
			type: Boolean,
			default: false,
		},
		prepend: {
			type: String,
			default: "",
		},
		append: {
			type: String,
			default: "",
		},
	},
	data() {
		return {}
	},
	computed: {
		modelValue: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
		textareaHeight() {
			let rows = this.rows
			if (typeof this.rows === "string") {
				rows = parseInt(this.rows)
			} else if (typeof this.rows === "object") {
				rows = this.rows.maxRows || 3
			}

			return rows * 40 + "rpx"
		},
		widthStyle() {
			if (this.type === "password" && this.prepend.length) {
				return {
					width: "auto",
				}
			} else if (this.type === "textarea") {
				return {
					width: "100%",
				}
			} else if (this.type === "text" && this.prepend.length) {
				return {
					width: "auto",
				}
			} else {
				return {
					width: "100%",
				}
			}
		},
	},

	methods: {
		close() {
			// this.modelValue = ""
			this.$emit("update:value", "")
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.input {
	position: relative;
	// width: 100%;
	display: flex;
	gap: 10rpx;
	// justify-content: flex-end;
	align-items: center;
	.input-components {
		font-size: 26rpx;
		display: block;
		flex: 1;
		border: 0;

		&:focus {
			outline: none;
		}
	}
	.close {
		line-height: 1;
	}
	.textarea-components {
		font-size: 26rpx;
		display: block;
		flex: 1;
		border: 1px solid #f5f5f5;
		border-radius: 10rpx;
		padding: 10rpx;
	}
	.limit {
		position: absolute;
		z-index: 2;
		right: 10rpx;
		bottom: 10rpx;
		font-size: 24rpx;
		color: #999;
		line-height: 1;
	}
}
</style>
